<template>
	<div>
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="心理测评名称">
				<el-input v-model="formInline.name" placeholder="心理测评名称"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="heartmarklist()" class="sjss">搜索</el-button>
				<el-button type="primary" style="margin-bottom: 10px;"
					@click="dialogFormVisible = true">新增心理测评</el-button>
			</el-form-item>
		</el-form>



		<el-table :data="list" border style="width: 100%"
			:header-cell-style="{fontSize: '14px', backgroundColor: '#1890ff',color:'#ffffff'}">
			<el-table-column prop="id" label="ID">
			</el-table-column>
			<el-table-column prop="name" label="测评名">
			</el-table-column>
			<el-table-column prop="simplyIntroduce" label="测评简介">
			</el-table-column>





			<el-table-column prop="img" label="心理测评图片">
				<template slot-scope='scope'>
					<el-image style="width: 100px; height: 100px"
						:src="'http://localhost:8888/sfzy/yuLan?filename='+scope.row.img"></el-image>
				</template>
			</el-table-column>





			<el-table-column prop="total" label="题目数量">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-link type="primary" @click="toEditheartmark(scope.row)">编辑测评</el-link>
					<el-link type="primary" @click="shanchushijian(scope.row.id)">删除测评</el-link>
				</template>
			</el-table-column>
		</el-table>


		<el-pagination @size-change="paginationSize" @current-change="paginationCurrent"
			:current-page="formInline.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="formInline.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
		<!-- 新增和修改的对话框 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancel">
			<el-form :model="heartmark">
				<el-form-item label="文章名称" label-width="80px">
					<el-input placeholder="请输入文章名称" v-model="heartmark.name">
					</el-input>
				</el-form-item>
				<el-form-item label="文章简介" label-width="80px">
					<el-input placeholder="请输入文章简介" v-model="heartmark.simplyIntroduce"></el-input>
				</el-form-item>






				<el-form-item label="文章图片" label-width="80px">
					<!-- <el-input placeholder="请输入文章图片" v-model="article.tabularChart">
				 </el-input> -->
					<!-- 
				el-upload:上传组件
				action： 上传网址
				list-type：上传组件类型
				on-preview ： 图片预览事件
				on-remove ：移除图片事件
				el-dialog : 预览图片组件
				on-success : 上传成功后的回调函数
				limit  ： 限制上传图片个数
				file-list:用来展示图片路径的数组-->
					<el-upload action="http://localhost:8888/sfzy/upload" list-type="picture-card"
						:on-success="handleSuccess" :limit="1" :on-preview="handlePictureCardPreview"
						:on-remove="handleRemove" :file-list="fileList">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</el-form-item>




				<el-form-item label="文章详情" label-width="80px">
					<el-input placeholder="请输入详情" v-model="heartmark.total"></el-input>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">

				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="heartmarkAdd">确 定</el-button>

			</div>

		</el-dialog>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				heartmark: { // 心理測評
					"id": '',
					"name": "",
					"simplyIntroduce": "",
					"img": "",
					"total": "",
				},
				formInline: {
					name: '',
					pageNum: 1,
					pageSize: 10
				},
				list: [],
				total: 1,
				title: '新增心理测评',
				dialogImageUrl: '', // 预览图片路径
				dialogVisible: false, // 预览图片的对话框
				dialogFormVisible: false,
				fileList: [],
			}
		},
		methods: {
			shanchushijian(id) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					this.$http.delete('heartmark/delete/' + id)
						.then(res => {
							if (res.data.status == 200) {
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
								this.heartmarklist()
							} else {
								this.$message({
									type: 'info',
									message: '删除失败'
								});
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			heartmarkAdd() {
				if (this.title == '新增心理测评') {
					this.$http.post('heartmark/add', this.heartmark)
						.then(res => {
							if (res.data.status == 200) {
								this.$message.success('添加成功')
								this.dialogFormVisible = false;
								this.heartmarklist()
								this.cancel()
							} else {
								this.$message.error('添加失败！')
							}
						})
				} else {
					this.$http.put('heartmark/update', this.heartmark)
						.then(res => {
							if (res.data.status == 200) {
								this.$message.success('修改成功')
								this.dialogFormVisible = false;
								this.heartmarklist()
								this.cancel()
							} else {
								this.$message.error('修改失败！')
							}
						})
				}
				this.fileList = [];
			},
			heartmarklist() {
				console.log(this.formInline.name)
				this.$http.get(
						'heartmark/find', {
							params: this.formInline
						})
					.then(res => {
						if (res.data.status == 200) {
							this.list = res.data.data.list;
							this.total = res.data.data.total;
							console.log()
						} else {
							this.$message.error('接口异常')
						}
					})
					.catch(err => {
						this.$message.error('接口异常')
					})
			},
			paginationSize(val) {
				this.formInline.pageSize = val;
				this.formInline.pageNum = 1;
				this.heartmarklist();
			},
			paginationCurrent(val) {
				this.formInline.pageNum = val;
				this.heartmarklist();
			},
			cancel() {
				this.dialogFormVisible = false;
				this.heartmark = {
					name: "",
					simplyIntroduce: "",
					img: "",
					text: "",
					createTime: ""
				};
				this.title = "新增心理测评";
				this.fileList = [];
			},
			toEditheartmark(row) {
				// console.log(row)
				// 赋值
				this.heartmark = row;
				// 设置标题
				this.title = "修改心理测评";

				// 开启对话框
				this.dialogFormVisible = true;
				// 动态的获取图片的名称并帮到到fileList
				this.fileList = [{
					name: row.img,
					url: 'http://10.10.18.194:8888/yuLan?filename=' + row.img
				}];



			},
			handleSuccess(response) {
				// 把上传后的图片路径，交给文章对象的tabularChart
				this.heartmark.img = response.message;
			},

			// 删除图片的事件
			handleRemove(file, fileList) {
				console.log(file, fileList);
				// 移除数据
				this.heartmark.img = '';
			},
			// 预览图片事件
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
		},

		mounted() {
			this.heartmarklist()
		},
	}
</script>

<style>
</style>